<template>
  <view class="app-container bill-detail-page">
    <view class="content">
      <view class="bill-status">
        <dict-tag :options="dict.type.pay_state" :value="bill.payState"/>
      </view>
      <view class="bill-info">
        <view class="item">
          <text class="label">账单金额</text>
          <text class="value">¥{{ bill.cost }}</text>
        </view>

        <view class="item">
          <text class="label">账单周期</text>
          <text class="value" v-if="bill.billStartTime && bill.billEndTime">
            {{ bill.billStartTime.slice(0, 10) }} 至 {{ bill.billEndTime.slice(0, 10) }}
          </text>
        </view>
        <view class="item" v-if="bill.latestPayTime">
          <text class="label">最晚付款日期</text>
          <text class="value">{{ truncateDate(bill.latestPayTime) }}</text>
        </view>
        <view class="item" v-if="bill.payMethod">
          <text class="label">支付方式</text>
          <text class="value">{{payMethodText(bill.payMethod)}}</text>
        </view>
        <view class="item" v-if="bill.payTime">
          <text class="label">支付时间</text>
          <text class="value">{{ bill.payTime }}</text>
        </view>
      </view>
      <view class="bill-info" style="margin-top: 20rpx">
        <view class="title" style=" padding: 12rpx 0;">
          <text class="title-text" style="font-weight: bold">账单明细</text>
        </view>
        <view class="item" v-for="(item, index) in bill.houseBillItemMerges">
          <text class="label">{{ item.itemName }}</text>
          <text class="value">¥{{ item.itemPrice }}</text>
        </view>
      </view>
    </view>
    <!--1: 待付款 3: 逾期 -->
    <view class="footer" v-if="bill.payState === PAY_STATUS.UNPAID || bill.payState === PAY_STATUS.OVERDUE">
      <view class="amount">
        <text class="unit">¥</text>
        <text class="number">{{ bill.cost }}</text>
      </view>
      <view class="btns">
        <u-button color="#FF7947" text="支付" shape="circle" @click="handlePay(bill.billId)"></u-button>
      </view>
    </view>
  </view>
</template>

<script>
import {billDetail} from "@/api/manager/order";
import {PAY_STATUS} from "@/components/app-constant";
import {truncateDate} from "@/utils/common";

export default {
  computed: {
    PAY_STATUS() {
      return PAY_STATUS
    },
    payMethodText() {
      return (value) => {
        let obj = [{ value: 1, label: '线上支付' }, { value: 2, label: '线下处理' }].find(item => item.value == value)
        return obj ? obj.label : ''
      }
    }
  },
  dicts: ['pay_state'],
  data() {
    return {
      billId: null,
      bill: {}
    };
  },
  onLoad(option) {
    this.billId = option.billId;
    this.getBillDetail(option.id)
  },

  onShow() {
    this.getBillDetail(this.billId)
  },
  methods: {
    truncateDate,
    getBillDetail(billId) {
      if(!billId) return;
      billDetail(billId).then(res => {
        this.bill = res.data;
      })
    },
    // 支付
    handlePay(billId) {
      this.$tab.navigateTo('/pages/manager/bill/bill-pay?id=' + billId)
    },
  }
}
</script>

<style lang="scss" scoped>
.bill-detail-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: space-between;

  .content {
    flex: 1;
    padding: 16rpx;

    .bill-status {
      font-size: 32rpx;
      margin-bottom: 20rpx;
      font-weight: bold;
      padding: 16rpx;
    }

    .bill-info {
      background-color: #fff;
      padding: 16rpx;
      border-radius: 8rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      overflow: hidden;

      .item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 16rpx;

        .label {
          font-size: 16px;
          color: #666;
        }

        .value {
          font-size: 16px;
          color: #333;
        }
      }
    }

    .bill-items {
      margin-top: 16rpx;
      background-color: #fff;
      padding: 16rpx;
      border-radius: 8rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      overflow: hidden;

      .header {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 16rpx;

      }

      .bill-item {
        .item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 16rpx;

          .label {
            font-size: 16px;
            color: #666;
          }

          .value {
            font-size: 16px;
            color: #333;
          }
        }
      }
    }
  }

  .footer {
    position: fixed;
    bottom: 10rpx;
    left: 0;
    right: 0;
    background-color: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #e0e0e0;
    padding: 16rpx 16px env(safe-area-inset-bottom) 16rpx;

    .amount {
      flex: 1;
      display: flex;
      align-items: center;
      margin-right: 16px;
      color: #FF7947;

      .unit {
        font-size: 36rpx;
      }

      .number {
        font-size: 42rpx;
        margin-left: 8rpx;
        font-weight: bold;
      }
    }

    .btns {
      width: 300rpx;
      display: flex;
      justify-content: center;
    }
  }
}


</style>
